<template>
  <div class="app-container">
    <el-row class="top">
      <el-col :span="6" class="left">
        已用：<span>{{ InitTableReatData.openTableNumber }}</span> 台 <span
          class="mar50">共：</span><span>{{ InitTableReatData.allTableNumber }}</span> 台
      </el-col>
      <el-col :span="6" class="right">
        实时上座率 <el-progress :percentage="InitTableReatData.openTableRateNumber"></el-progress>
      </el-col>
      <el-col :span="12" class="right">
        <el-date-picker
          v-model="date"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="width: 400px"
        />
        <el-button type="success" @click="search">查询</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-between">
      <el-col :span="4" class="item">
        <ul>
          <li>扫码收入</li>
          <li><span>{{ totalDetails.scanMoney }}</span> 元</li>
        </ul>
        <img src="@/assets/image/saoma.png" alt="">
      </el-col>
      <el-col :span="4" class="item">
        <ul>
          <li>现金收入</li>
          <li><span>{{ totalDetails.cashIncome }}</span> 元</li>
        </ul>
        <img src="@/assets/image/xianjin.png" alt="">
      </el-col>
      <el-col :span="4" class="item">
        <ul>
          <li>其他收入</li>
          <li><span class="other">{{ totalDetails.otherIncome }}</span> 元</li>
        </ul>
        <img src="@/assets/image/other.png" alt="">
      </el-col>
      <el-col :span="4" class="item">
        <ul>
          <li>收入总额</li>
          <li><span class="income">{{ totalDetails.receiveMoney }}</span> 元</li>
        </ul>
        <img src="@/assets/image/income.png" alt="">
      </el-col>
      <el-col :span="4" class="item">
        <ul>
          <li>退款金额</li>
          <li><span class="tuik">{{ totalDetails.refundMoney }}</span> 元</li>
        </ul>
        <img src="@/assets/image/tuikuan.png" alt="">
      </el-col>
      <el-col :span="4" class="item">
        <ul>
          <li>其他支出</li>
          <li><span class="tuik">{{ totalDetails.otherRefundMoney }}</span> 元</li>
        </ul>
        <img src="@/assets/image/tuikuan.png" alt="">
      </el-col>
      <el-col :span="4" class="item">
        <ul>
          <li>盈收</li>
          <li><span class="tuik">{{ totalDetails.revenueMoney }}</span> 元</li>
        </ul>
        <img src="@/assets/image/xianjin.png" alt="">
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="data">
        <div class="title">
          <span>经营流水</span>
<!--          <el-date-picker v-model="formDate.startTime" type="datetime" value-format="yyyy-MM-dd HH-mm-ss" placeholder="选择开始日期" />-->
<!--          <el-date-picker v-model="formDate.endTime" value-format="yyyy-MM-dd HH-mm-ss" type="datetime" placeholder="选择结束日期" />-->
        </div>
        <div ref="line" class="bar"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import dialogDetail from './dialogDetail'
import {
  allRecharge,
  AllRecord,
  getInitTableReat,
  recordIndex,
  selectItIntegralInfo,
  tableCollect
} from "@/api/mahjong/record";
import {parseTime} from "@/utils/ruoyi";
import moment from "moment";

export default {
  name: "Server",
  components: { dialogDetail },
  data() {
    return {
      visible: false,
      totalDetails: '',
      total: '',

      formDate: {
        startTime: '',
        endTime: '',
      },
      date: [moment().startOf('day').toDate(), moment().endOf('day').toDate()],
      formDate1: {
        startTime: '',
        endTime: ''
      },
      value: '',
      form: {
        value: '',
        name: ''
      },
      tableData: [{
        name: '厉飞雨',
        phone: '15798459297',
        money: '14.0',
        yue: '20',
        jifen: '200',
        date: '2099-09-06'
      }, {
        name: '厉飞雨',
        phone: '15798459297',
        money: '14.0',
        yue: '20',
        jifen: '200',
        date: '2099-09-06'
      }, {
        name: '厉飞雨',
        phone: '15798459297',
        money: '14.0',
        yue: '20',
        jifen: '200',
        date: '2099-09-06'
      }, {
        name: '厉飞雨',
        phone: '15798459297',
        money: '14.0',
        yue: '20',
        jifen: '200',
        date: '2099-09-06'
      }],
      tableData1: [{
        name: '厉飞雨',
        num: '80',
        date: '2099-09-06'
      }, {
        name: '厉飞雨',
        num: '80',
        date: '2099-09-06'
      }, {
        name: '厉飞雨',
        num: '80',
        date: '2099-09-06'
      }, {
        name: '厉飞雨',
        num: '80',
        date: '2099-09-06'
      }],
      cashReceiveVo: [],
      tableReceiveVos: [],
      xline: [],
      realData: [],
      initIntegralData: [],
      getIntegralInfo: [],
      InitTableReatData: [],
      openTableRateNumber: 0,
      tablenumberNames: [],
      tableTotalMoneys: [],
      times: [],
      productValues: [],
      topUpValues: [],
      refundValues: [],
      OtherValues: [],

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  created() {

  },
  mounted() {
    this.initData();
    this.search();
    this.searchReal()

  },
  methods: {
    /** 查询积分信息 */

    /** 查询桌子上座率信息 */
    // initTableReat(){
    //   this.getInitTableReat().then(response => {
    //
    //     this.InitTableReatData = response.data;
    //     console.log(this.InitTableReatData);
    //     // this.loading = false;
    //   });
    // },
    /** 查询积分情况 */
    // intergalManagement(){
    //    this.getIntegralInfo().then(response => {
    //     this.integralList = response.data;
    //     // this.total = response.total;
    //     // this.loading = false;
    //   });
    // },
    search() {
      this.times = []
      this.productValues = []
      this.topUpValues = []
      this.refundValues = []
      this.OtherValues = []
      if (this.date && this.date.length > 1) {
        console.log(this.date)
        this.formDate.startTime = parseTime(this.date[0])
        this.formDate.endTime = parseTime(this.date[1])
      }else {
        this.formDate.startTime = null
        this.formDate.endTime = null
      }
      recordIndex(this.formDate).then(response => {
        this.totalDetails = response.data;
        this.loading = false;
      });
      AllRecord(this.formDate).then(response => {
        this.times = response.data.times
        this.productValues = response.data.productValues
        this.topUpValues = response.data.topUpValues
        this.refundValues = response.data.refundValues
        this.OtherValues = response.data.OtherValues

        // response.data.cashReceiveVo.map(item => {
        //   this.cashReceiveVo.push(item.receiveMoney)
        //
        // })
        // response.data.tableReceiveVos.map(item => {
        //   this.tableReceiveVos.push(item.receiveMoney)
        //
        //   this.xline.push(item.receiveDate)
        // })
        // console.log(this.xline, this.tableReceiveVos)
        this.initChart();
      });
    },
    searchReal() {
      this.tablenumberNames = []
      this.tableTotalMoneys = []
      tableCollect(this.formDate1).then(response => {
        response.data.map(item =>{
          this.tablenumberNames.push(item.tablenumberName)
          this.tableTotalMoneys.push(item.totalMoney)
        })
        this.initChart();
      });
    },
    initData() {
      recordIndex({}).then(response => {
        this.totalDetails = response.data;
        this.loading = false;
      });
      allRecharge({}).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      selectItIntegralInfo().then(response => {
        this.initIntegralData = response.data;
        // console.log(this.InitTableReatData);
        // this.loading = false;
      });
      getInitTableReat().then(response => {
        this.InitTableReatData = response.data;
        console.log(this.InitTableReatData);
        // this.loading = false;
      });
    },

    initChart() {
      // let myChartbar = this.$echarts.init(this.$refs.bar);
      let myChartLine = this.$echarts.init(this.$refs.line);

      // myChartbar.setOption({
      //   // color: ['#CA6E62', '#CAC062', '#62CA9E', '#B5CA62', '#CA9A62'],
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
      //       type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      //     }
      //   },
      //   xAxis: [{
      //       type: 'category',
      //       data: this.tablenumberNames,
      //       axisTick: {alignWithLabel: true}
      //   }],
      //   yAxis: [{type: 'value'}],
      //   series: [{
      //       data: this.tableTotalMoneys,
      //       type: 'bar'
      //   }]
      // })

      myChartLine.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['商品', '充值', '退款' , '其他'],
          top: 20,
          right: 0,
          icon: 'rect', // 修改形状
          itemHeight: 20, // 修改icon图形大小
          itemWidth: 20,
          // itemGap: 24, // 修改间距
          textStyle: {
            fontSize: 15,
            color: '#ccc',
            // padding: [0, 0, 0, -8], // 修改文字和图标距离
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: this.times
        }],
        yAxis: [{type: 'value'}],
        series: [
          {
            name: '商品',
            type: 'line',
            stack: '总量',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#83CA62'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#5DEBF4' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }

            },
            color: '#83CA62', //线条颜色
            smooth: true,
            data: this.productValues
          },
          {
            name: '充值',
            type: 'line',
            stack: '总量',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#C2E5FF'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#FFCD1B' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }

            },
            color: '#CA9A62', //线条颜色
            smooth: true,
            data: this.topUpValues
          },
          {
            name: '退款',
            type: 'line',
            stack: '总量',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#C2E5FF'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#FFCD1B' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }

            },
            color: '#CA9A62', //线条颜色
            smooth: true,
            data: this.refundValues
          },
          {
            name: '其他',
            type: 'line',
            stack: '总量',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#C2E5FF'  // 100% 处的颜色
                }, {
                  offset: 1, color: '#FFCD1B' //   0% 处的颜色
                }],
                global: false // 缺省为 false
              }

            },
            color: '#CA9A62', //线条颜色
            smooth: true,
            data: this.OtherValues
          }


        ]
      })

    },
  }
};
</script>
<style>
.el-progress-bar__inner {
  background-color: unset;
  background-image: linear-gradient(to right, #FDA033, #FFE500);
}

.el-progress {
  display: inline-block;
  width: 250px;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 185px;
}
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.paginations {
  text-align: center;
  margin-top: 20px;
}

.tables {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;

  .detail {
    background-color: #CAAB62;
    color: #fff;
  }

  .title {
    display: flex;
    align-items: center;

    span {
      margin-bottom: 22px;
    }
  }

  &:first-child {
    margin-right: 20px;
  }
}

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;

  span {
    font-size: 18px;
    color: #201D1B;
    position: relative;

    &::before {
      display: block;
      background-color: #CAAB62;
      width: 4px;
      height: 22px;
      content: '';
      position: absolute;
      left: -15px;
      top: 0px;
    }
  }

  &:nth-child(1) {
    margin-right: 20px;
  }
}

.data {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px;


  .bar {
    height: 400px;

  }

  &:first-child {
    margin-right: 20px;
  }
}

.top {
  margin-bottom: 15px;
  color: #9C9186;
  font-size: 14px;

  .left {
    span:not(.mar50) {
      color: #201D1B;
    }

    .mar50 {
      margin-left: 50px;
    }
  }

  .right {
    text-align: right;
  }

}

.item {
  font-size: 14px;
  color: #CAAB62;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 4px;
  height: 150px;
  margin-right: 10px;

  &:last-child {
    margin-right: 0;
  }

  img {
    margin-left: 30px;
  }

  li:nth-of-type(2) {
    color: #9C9186;

    span {
      font-size: 30px;
      color: #09A834;
    }

    .other {
      color: #F1C917;
    }

    .income {
      color: #57CBED;
    }

    .tuik {
      color: #FF51A9;
    }
  }
}
</style>
